<template>
  <div class="operationPageWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">企业:</span>
                <span class="searchInputFont">
                <el-select v-model="searchInfo.enterpriseNo" size="mini" @change="searchRowsInfo(true)" clearable
                           placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">类型:</span>
                <span class="searchInputFont">
                <el-select v-model="searchInfo.userType" size="mini" @change="searchRowsInfo(true)" clearable
                           placeholder="全部">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="searchWrap">
                <span class="searchFont">行政区域:</span>
                <span class="searchInputFont" style="width: 38%;">
                  <el-select v-model="searchInfo.district" @change="changeDistrict(searchInfo.district)" size="mini"
                             :disabled="$store.state.userInfo.regionId?true:false" clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
                <span class="searchInputFont" style="width: 38%;">
                    <el-select v-model="searchInfo.street" @change="searchRowsInfo(true)" size="mini" clearable
                               placeholder="街道">
                      <el-option
                        v-for="item in streetData"
                        :key="item.id"
                        :label="item.regionName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                 </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo(true)">查询</el-button>
              <addBtn @searchRowsInfo="searchRowsInfo" v-if="$store.state.btnMenuIds.indexOf(229)>-1"></addBtn>
              <!--<el-button type="primary" style="margin-left: 10px;" size="mini"
                         @click="$refs.sendBtn.dialogOpen(multipleSelection)">短信通知

              </el-button>-->
            </div>

          </el-row>
        </div>
      </div>
      <div class="tableContainer">
        <div class="tableInner" ref="tableInner">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            @selection-change="changeFun"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              @selection-change="changeFun"
              width="60">
            </el-table-column>
            <el-table-column
              label="企业"
              prop="enterpriseName"
              show-overflow-tooltip
            >

            </el-table-column>
            <el-table-column
              label="姓名"
              prop="userName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="人员类型"
              prop="userType"
            >
              <template slot-scope="scope">
                {{scope.row.userType ? "应急人员" : "值班人员"}}


              </template>
            </el-table-column>
            <el-table-column
              label="联系方式"
              prop="contact"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="行政区域"
              prop="districtName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="行政街道"
              prop="streetName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="状态"
              prop="userStatus"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.userStatus ? "停用" : "启用"}}


              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <i @click="$refs.setBtn.dialogOpen(scope.row)" class="iconfont icon-bianji1"
                   style="margin-right: 10px;"></i>
                <el-tooltip :visible-arrow="false" class="item" effect="dark" content="停用" placement="top-start">
                  <i v-show="scope.row.userStatus==0" @click="handleEdit(scope.row,false)"
                     class="iconfont icon-tingyong"></i>
                </el-tooltip>
                <el-tooltip :visible-arrow="false" class="item" effect="dark" content="启用" placement="top-start">
                  <i v-show="scope.row.userStatus==1" @click="handleEdit(scope.row,true)"
                     class="iconfont icon-qiyong"></i>
                </el-tooltip>
                <el-tooltip :visible-arrow="false" class="item" effect="dark" content="查看推送记录" placement="top-start">
                  <!--v-if="$store.state.btnMenuIds.indexOf(167)>-1"-->
                  <i @click="$refs.detailBtn.dialogOpen(scope.row.id)" class="iconfont icon-chakan"
                     style="margin-left: 10px;"></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="text-align: left;margin-top: 15px;">
          <el-row :gutter="10">
            <el-col :span="13" :offset="9">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchInfo.page"
                :page-sizes="[10, 30, 50, 100,200]"
                :page-size="searchInfo.rows"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count">
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <setBtn ref="setBtn" @searchRowsInfo="searchRowsInfo"></setBtn>
    <detailBtn ref="detailBtn"></detailBtn>
    <sendBtn ref="sendBtn"></sendBtn>
  </div>
</template>

<script>
  import addBtn from "./addBtn.vue"
  import setBtn from "./setBtn.vue"
  import detailBtn from "./detailBtn.vue"
  import sendBtn from "./sendBtn.vue"
  export default {
    props: [],
    data(){
      return {
        rows: [],
        multipleSelection: [],
        options: [{label: "值班人员", value: 0}, {label: "应急人员", value: 1}],
        count: 0,
        tableHeight: 400,
        searchInfo: {
          street: "",
          district: this.$store.state.userInfo.regionId,
          enterpriseNo: "",
          userType: "",
          page: 1,
          rows: 10,
        },
        streetData: [],
      }
    },
    components: {addBtn, setBtn, detailBtn, sendBtn},
    created(){
      this.searchRowsInfo()

    },
    mounted(){
      setTimeout(() => {
        if (this.$store.state.userInfo.regionId) {this.changeDistrict(this.searchInfo.district)}
      }, 500)
      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".operationPageWrap").clientHeight - 160
      })
    },

    methods: {
      //编辑
      handleEdit(row, key){
        let msg, url
        if (key) {   //启用
          msg = '确认启用人员 “' + row.userName + '” , 是否继续?'
          url = "enableSafeUser"
        } else {
          msg = '确认停用人员 “' + row.userName + '” , 是否继续?'
          url = "disableSafeUser"
        }
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(process.env.API_HOST + `/enterprise/` + url, {id: row.id})
            .then(response => {
              const result = response.data
              if (result.code === 200) {
                this.searchRowsInfo(true)
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
              }
            })

          //删除当前
        }).catch(() => {

        });
      },
      //获取街道
      changeDistrict(district){
        this.searchRowsInfo(true)
        if (!district) {
          this.searchInfo.street = ""
          this.streetData = []
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion', {parentId: district})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
            }
          })
      },
      changeFun(val) {
        this.multipleSelection = []
        val.forEach(item => {
          this.multipleSelection.push(item.id)
        })
      },
      handleSizeChange(val) {
        this.searchInfo.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.searchInfo.page = val;
        this.searchRowsInfo()

      },


      //获取所有信息
      searchRowsInfo(val){
        val ?this.searchInfo.page = 1: ""
        this.axios.post(process.env.API_HOST + `/enterprise/selectSafeUserGrid`, this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.rows = result.rows
              this.count = result.total;
            }
          })
      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .operationPageWrap
    page()

</style>
